前端视觉优化（一）CSS边框阴影、四周阴影讲解

2024-06-03 02:29| 来源: 网络整理| 查看: 265

先上一个代码

在这里插入图片描述通俗讲解吧，分5个参数 1.控制水平位置阴影，+为右边，0为中间（即两边都有，通过参3控制大小） 2.控制垂直方向阴影，+为下边，0为中间（即两边都有，通过参3控制大小） 3.模糊距离 4.阴影尺寸（所谓向外延伸）（3和4实际效果有丢丢区分，自己调一下即可） 5.阴影颜色

· · ·

其实有6个参数，以下是官方文档 h-shadow 必需。水平阴影的位置。允许负值。测试 v-shadow 必需。垂直阴影的位置。允许负值。测试 blur 可选。模糊距离。测试 spread 可选。阴影的尺寸。测试 color 可选。阴影的颜色。请参阅 CSS 颜色值。测试 inset 可选。将外部阴影 (outset) 改为内部阴影。

本人亲调，十分顺眼哈哈 box-shadow: 0 0 5px 1px #999

在这里插入图片描述 ·

2020.12.22补充对上面内容微调了一下阴影是可以做成彩虹光晕那样子的，因为是可以同时设置多个背景阴影。即：box-shadow:5个参数，5个参数，5个参数。

应该都能看懂吧，要通过外延这个属性，把最底部的颜色拉出来一些，才不会被上面的覆盖（第一次逗号前颜色在最上面）

eg:box-shadow:1px 1px 3px red,2px 2px 3px yellow,3px 3px 3px orange 想要做成发光效果，就是白色阴影，配合明亮色背景，就有发光感觉还有内阴影的，就是颜色参数后面加一个inset，一般用于点击或者hover动画

【本文地址】

公司简介

联系我们